<template>
  <van-skeleton title avatar :row="3" :loading="props.loading">
    <van-card
        v-for="user in props.userList"
        :desc="user.profile"
        :title="user.username"
        :thumb="user.avatarUrl"
        @click="showUserInfo(user.id)"
    >
      <template #tags>
        <van-tag plain type="danger" v-for="tag in tags"
                 style="margin-right: 8px; margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="showUserInfo(user.id)">联系我</van-button>
      </template>
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">

import {userType} from "../models/user";
import {useRouter} from "vue-router";

interface UserCardListProps {
  loading: boolean;
  userList: userType[];
}

const tags: string[] = []

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  // @ts-ignore
  userList: [] as userType[],
})

const router = useRouter()
const showUserInfo = (id: number) => {
  router.push({
    path: '/user/info',
    query: {
      id,
    }
  })
}

</script>

<style scoped>

</style>
